<!DOCTYPE html>
<html>

<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>广告管理</title>
	<!-- Tell the browser to be responsive to screen width -->
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

	<link rel="stylesheet" href="/plugins/select2/select2.css" />
	<link rel="stylesheet" href="/plugins/select2/select2-bootstrap.css" />
	<script src="/plugins/select2/select2.min.js" type="text/javascript"></script>

	<!--图片上传-->
	<link rel="stylesheet" type="text/css" href="/plugins/bootstrap-fileinput/css/fileinput.min.css"/>
	<script type="text/javascript" src="/plugins/bootstrap-fileinput/js/fileinput.js"></script>
	<script type="text/javascript" src="/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->
<div class="box-header with-border">
	<h3 class="box-title">广告管理</h3>
</div>

<div class="box-body">

	<!-- 数据表格 -->
	<div class="table-box">

		<!--工具栏-->
		<div class="pull-left">
			<div class="form-group form-inline">
				<div class="btn-group">
					<button type="button" class="btn btn-default"  title="新建" data-toggle="modal" data-target="#editModal"><i class="fa fa-file-o"></i> 新建</button>
					<button type="button" class="btn btn-default" title="删除" onclick="deleteAll()" ><i class="fa fa-trash-o"></i> 删除</button>
					<button type="button" class="btn btn-default" title="开启" onclick='confirm("你确认要开启吗？")'><i class="fa fa-check"></i> 开启</button>
					<button type="button" class="btn btn-default" title="屏蔽" onclick='confirm("你确认要屏蔽吗？")'><i class="fa fa-ban"></i> 屏蔽</button>
					<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
				</div>
			</div>
		</div>
		<div class="box-tools pull-right">
			<div class="has-feedback">

			</div>
		</div>
		<!--工具栏/-->

		<!--数据列表-->
		<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			<thead>
			<tr>
				<th class="" style="padding-right:0px">
					<input id="selall" type="checkbox" class="icheckbox_square-blue">
				</th>
				<th class="sorting_asc">广告ID</th>
				<th class="sorting">分类ID</th>
				<th class="sorting">标题</th>
				<th class="sorting">URL</th>
				<th class="sorting">图片</th>
				<th class="sorting">排序</th>
				<th class="sorting">是否有效</th>
				<th class="text-center">操作</th>
			</tr>
			</thead>
			<tbody id="tbody_data">

			</tbody>
		</table>
		<div th:insert="page.html"></div>
		<!--数据列表/-->
	</div>
	<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- 编辑窗口 -->
<form id="addForm">
	<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" >
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="myModalLabel1">广告编辑</h3>
				</div>
				<div class="modal-body">
					<table class="table table-bordered table-striped"  width="800px">
				  <tr>
					<td>广告分类</td>
					<td>
						<select class="form-control" name="categoryId" >
								<option value="-1">请选择</option>
								<option th:each="list : ${list}" th:value="${list.id}">[[${list.name}]]</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>标题</td>
					<td><input  class="form-control" placeholder="标题" name="title">  </td>
				</tr>
				<tr>
					<td>URL</td>
					<td><input  class="form-control" placeholder="URL" name="url">  </td>
				</tr>
				<tr>
					<td>排序</td>
					<td><input  class="form-control" placeholder="排序" name="sortOrder">  </td>
				</tr>
				<tr>
					<td>广告图片</td>
				</tr>
					<table>
						<tr>
							<td>
								<input type="file" id="image" name="myFile" multiple/>
								<input type="text" id="simage" name="pic">
							</td>
						</tr>
					</table>
					</td>
				<tr>
					<td>是否有效</td>
					<td>
						<input type="checkbox" class="icheckbox_square-blue" >
						<input type="radio" value="1" name="status" id="status1">是
						<input type="radio" value="0" name="status" id="status0">否
					</td>
				</tr>
				</table>
			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="add_all()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
	</div>
</form>

<!-- 增加窗口 -->
<form id="updataForm">
	<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" >
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="myModalLabel">广告编辑</h3>
				</div>
				<div class="modal-body">

					<table class="table table-bordered table-striped"  width="800px">
						<tr>
							<td>广告分类</td>
							<td><input type="hidden" id="cid" name="id"></td>
							<td>
								<select name="categoryId" id="brand" style="width: 100%">
									<option value="-1">请选择</option>
									<option th:each="list : ${list}" th:value="${list.id}">[[${list.name}]]</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>标题</td>
							<td><input  class="form-control" placeholder="标题" name="title" id="title">  </td>
						</tr>
						<tr>
							<td>URL</td>
							<td><input  class="form-control" placeholder="URL" name="url" id="url">  </td>
						</tr>
						<tr>
							<td>排序</td>
							<td><input  class="form-control" placeholder="排序" name="sortOrder" id="sortOrder">  </td>
						</tr>
						<tr>
							<td>广告图片</td>
							<td>
								<table>
									<tr>
										<td>
											<input type="file" id="images" name="myFile" multiple/>
											<input type="text" id="simages" name="pic" >
											<input type="text" id="pic"><br>
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td>是否有效</td>
							<td>
								<input type="radio" value="1" name="status" id="status2">是
								<input type="radio" value="0" name="status" id="status3">否
							</td>
						</tr>
					</table>

				</div>
				<div class="modal-footer">
					<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateAll()">保存</button>
					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
				</div>
			</div>
		</div>
	</div>
</form>
</body>
</html>
<script>
	$(function (){
		getData();
		$("#brand").select2();
	})
	function getData(){
		$.ajax({
			url:"/contentController/contentList",
			data:{pageNum:$("#pageNum").val(),pageSize:$("#pageSize").val()},
			type:"post",
			dataType:"json",
			async:false,
			success:function (results) {
				var page = results.data;
				var result = page.rows;
				var v = "";
				for (var i = 0; i < result.length; i++) {
					v += "<tr>"
					v += "<td>"
					v += "<input type='checkbox' name='check' value='" + result[i].id + "'>"
					v += "</td>"
					v += "<td>" + result[i].id + "</td>"
					v += "<td>" + result[i].categoryId + "</td>";
					v += "<td>" + result[i].title + "</td>"
					v += "<td>" + result[i].url + "</td>"
					v += "<td>"
					v += "<img src='" + result[i].pic + "' width='100' height='100'>"
					v += "</td>"
					v += "<td>" + result[i].sortOrder + "</td>"
					v += "<td>"
					if (result[i].status == 0) {
						v += "无效";
					}
					if (result[i].status == 1) {
						v += "有效";
					}
					v += "</td>"
					v += "<td class=\"text-center\">"
					v += "<button type=\"button\" class=\"btn bg-olive btn-xs\" data-toggle=\"modal\" data-target=\"#updateModal\" onclick='toUpdate(" + result[i].id + ")'>修改"
					v += "</button>"
					v += "</td>"
					v += "</tr>"
				}
				$("#tbody_data").html(v);
				buildPage(page)
			}
		})
	}
	//商品图片上传
	$(function () {
		$('#image').fileinput({
			language: 'zh',//汉化
			uploadUrl: '/file/upLoadFile',//上传地址
			browseClass: 'btn btn-primary',
			allowedFileExtensions: ['jpg', 'png', 'gif', 'txt', 'jpeg', 'xls', 'xlsx'],
			maxFileSize: 40240,//设置文件上传大小
			maxFileCount: 3,//最大上传数量
			enctype: "multipart/form-data",
		});
		$("#image").on('fileuploaded',function (event,data,previewId,index){
			var imgUrl = data.response.data;
			$("#simage").val(imgUrl);
		})

	})
	function add_all() {
		console.log($("#addForm").serialize());
		$.ajax({
			url:"/contentController/increase",
			dataType:"json",
			type:"post",
			data: $("#addForm").serialize(),
			success:function (result){
				if (result.code==10000){
					alert("增加成功" + result.data + "行");
					window.location.reload();
				}
			},
		})
	}
	//回显数据
	function toUpdate(id){
		$.ajax({
			url:"/contentController/toUpdate/"+id,
			type : "post", // 请求方式
			async:false,
			dataType :"json", // 后台返回的数据 以什么格式进行解析 json text xml  html
			success :function(result){// 成功回调函数
				var	conte =result.data
				//回显关联品牌
				var i = conte.categoryId;
				//select2回显方法
				$("#brand").val(i).trigger('change');
				if (conte.status == 1){
					$("#status2").prop("checked",true);
				}else {
					$("#status3").prop("checked",true);
				}
				var id = conte.id;
				var title = conte.title;
				var url = conte.url;
				var sortOrder = conte.sortOrder;
				var pic = conte.pic
				$("#cid").val(id);
				$("#title").val(title);
				$("#url").val(url);
				$("#sortOrder").val(sortOrder);
				$("#pic").val(pic);
			},
		})

	}
	//商品图片上传
	$(function () {
		$('#images').fileinput({
			language: 'zh',//汉化
			uploadUrl: '/file/upLoadFile',//上传地址
			browseClass: 'btn btn-primary',
			allowedFileExtensions: ['jpg', 'png', 'gif', 'txt', 'pdf', 'jpeg', 'xlsx'],
			maxFileSize: 40240,//设置文件上传大小
			maxFileCount: 3,//最大上传数量
			enctype: "multipart/form-data",

		});
		$("#images").on('fileuploaded',function (event,data,previewId,index){
			var imgUrl = data.response.data;
			$("#simages").val(imgUrl);
		})

	})
	function updateAll(){
		alert($("#updataForm").serialize())
		$.ajax({
			url : "/contentController/updateInfo",
			data:$("#updataForm").serialize(),
			type : "post",
			dataType : "json",
			async : true,
			success : function (result){
				if (result.code==10000){
					alert("修改成功")
					window.location.reload()
				}
			},
		})
	}
	//批量删除
	function deleteAll(){
		var ids = [];
		var boxs = $("[name=check]:checked")
		$(boxs).each(function (i,e){
			ids.push(e.value)
		})
		alert(ids)
			$.ajax({
				url:"/contentController/deleteBatch/"+ids,
				type:"post",
				dataType:"json",
				async:true,
				success:function (result){
					if (result.code==10000){
						alert("删除成功")
						window.location.reload();
					}
				},
			})
	}
</script>